<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="../../css/shangping/shangping.css">
</head>

<body>
    <!-- 顶部导航栏 -->
    <header class="layout-header">
        <div class="layout-header-mid">
            <div class="header-logo">
                <a href="" class="header-logo-img"><img src="../../images/shangping/logo.png" alt=""></a>
            </div>
            <ul class="layout-header-service">
                <li class="layout-header-service-item layout-header-service-search mz-autocomlete">
                    <input type="text" placeholder="魅族 17" class="service-input">
                    <img src="../../images/shangping/sosuo.png" alt="" class="layout-header-sosuo"></li>
                <li class="layout-header-service-item">
                    <a href="" class="layout-header-service-link layout-header-service-avatar">

                    </a>
                </li>
                <li class="layout-header-service-item service-car">
                    <a href="" class="layout-header-service-link service-car-1">
                        <img src="../../images/shangping/car.png" alt="" class="service-car-2">
                        <span class="service-car-num">1</span>
                    </a>
                </li>
            </ul>
            <ul class="layout-header-nav">
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">手机</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">声学</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">配件</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">生活</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">Flyme</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">服务</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">专卖店</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">社区</a></li>
                <li class="layout-header-nav-item"><a href="" class="layout-header-nav-link">企业服务</a></li>
                <li class="layout-header-nav-item link-last "><a href="" class="layout-header-nav-link ">APP下载</a></li>
            </ul>
        </div>
    </header>
    <!-- 标题栏 -->
    <div class="page">
        <div class="page-top">
            <div class="container-1">
                <ul class="ulist">
                    <li><a href="">概述</a></li>
                    <li><a href="">魅族 17 Pro 晓芳窑艺术典藏版</a></li>
                    <li><a href="">参数</a></li>
                    <li><a href="">换机指引</a></li>
                </ul>
                <span class="name-1">
                    魅族 17 Pro
                </span>
            </div>
        </div>
        <!-- 内容栏 -->
        <div class="page-cont">
            <div class="preview">
                <div class="preview-1">
                    <img src="../../images/shangping/sj-1.jpg" alt="" class="img-1">
                </div>
                <ul>
                    <li>
                        <a href=""><img src="../../images/shangping/sj-2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="../../images/shangping/sj-3.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="../../images/shangping/sj-4.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href=""><img src="../../images/shangping/sj-5.jpg" alt=""></a>
                    </li>
                </ul>
                <div class="preview-2">
                    <a href="" class="i-1"><i class="iconfont icon-star"></i> 收藏</a>
                    <a href="" class="i-2"><i class="iconfont icon-duibi "></i>对比</a>
                </div>
            </div>
            <div class="property">
                <div class="property-tit">
                    <h1>魅族 17 Pro</h1>
                    <p>【限时领券立省100 | 购17 Pro赠全新壳膜套装】高通骁龙 865 + UFS 3.1 + LPDDR5 | 6400W 全场景 AR 专业影像系统 | 煅烧陶瓷机身 | mSmart 5G 快省稳系统方案</p>
                </div>
                <!-- 价格 -->
                <div class="property-sell">
                    <div class="property-sell-price">
                        <div class="mod-price">
                            <span class="span-1">￥</span>
                            <span class="span-2">4299.00</span>
                        </div>
                    </div>
                    <div class="property-sell-2">
                        <div class="vm-entry">
                            <span>加价购</span>
                        </div>
                        <div>
                            <span>另加29元起，即可换购超值商品</span>
                            <a href="">立即加购 ></a>
                        </div>
                    </div>
                </div>
                <!-- 服务 -->
                <div class="property-service">
                    <div class="property-service-1">
                        <div class="vm-metatit">
                            支 <span class="s-space"></span>
                            <span class="s-space"></span> 持
                        </div>
                        <div class="mod-bd">
                            <span><i class="iconfont icon-gou"></i> 花呗分期</span>
                            <span><i class="iconfont icon-gou"></i>顺丰发货</span>
                            <span><i class="iconfont icon-gou"></i>7天无理由退货（具体查看详情）</span>
                        </div>
                    </div>
                    <div class="property-service-2">
                        <div class="vm-metatit">配送服务</div>
                        <div class="site-selector">
                            <div class="text">
                                四川省 成都市
                            </div>
                        </div>
                    </div>
                    <div class="property-service-3">
                        本商品由 魅族 负责发货并提供售后服务
                        <a href="">商城客服 ></a>
                    </div>
                </div>
                <!-- 型号 -->
                <div class="property-sibling">
                    <div class="property-sibling-1">
                        <div class="vm-metatit-1">
                            型 <span class="s-space"></span>
                            <span class="s-space"></span> 号
                        </div>
                        <div class="property-sibling-2">
                            <a href="" class="a-1">魅族 17 Pro</a>
                            <a href="">魅族 17</a>
                            <a href="">【老用户】魅族 17</a>
                            <a href="">【老用户】17 Pro</a>
                        </div>
                    </div>
                </div>
                <!-- 分类 -->
                <div class="property-set">
                    <div class="property-set-sale">
                        <div class="vm-metatit-1">网络类型</div>
                        <div class="property-set-sale-1">
                            <a href="" class="a-1">全网通公开版</a>
                        </div>
                    </div>
                    <div class="property-set-sale">
                        <div class="vm-metatit-1">颜色分类</div>
                        <div class="property-set-sale-1">
                            <a href="" class="sale-img"><img src="../../images/shangping/color1.png" alt=""> 乌金</a>
                            <a href="" class="sale-img"><img src="../../images/shangping/color2.png" alt="">定白</a>
                            <a href="" class="sale-img"><img src="../../images/shangping/color3.png" alt="">天青</a>
                            <a href="" class="a-1 sale-img"><img src="../../images/shangping/color4.png" alt="">月白天青</a>
                        </div>
                    </div>
                    <div class="property-set-sale">
                        <div class="vm-metatit-1">内存容量</div>
                        <div class="property-set-sale-1">
                            <a href="" class="a-1">8+128GB</a>
                            <a href="">12+256GB</a>
                        </div>
                    </div>
                    <div class="property-set-sale">
                        <div class="vm-metatit-1">选择套餐</div>
                        <div class="property-set-sale-1">
                            <a href="" class="a-1">官方标配</a>
                            <a href="">无线充套餐</a>
                            <a href="">碎片保套餐</a>
                            <a href="">充电套餐</a>
                        </div>
                    </div>
                    <div class="property-set-sale">
                        <div class="vm-metatit-1">花呗分期</div>
                        <div class="property-huabei">
                            <a href="">
                                <span class="sale-span1">¥1465.96×3期</span>
                                <span class="sale-span2">含手续费 ￥32.96/期</span>
                            </a>
                            <a href="">
                                <span class="sale-span1">¥748.74×6期</span>
                                <span class="sale-span2">含手续费 ￥32.24/期</span>
                            </a>
                            <a href="">
                                <span class="sale-span1">¥385.11×12期</span>
                                <span class="sale-span2">含手续费 ￥26.86/期</span>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- 购买 -->
                <div class="property-buy">
                    <div class="property-buy-1">
                        <div class="vm-metatit-1">
                            数<span class="s-space"></span>
                            <span class="s-space"></span> 量
                        </div>
                        <div>
                            <div class="mod-control">
                                <a href="" class="vm-minus jianhao" role="button">-</a>
                                <input type="text" value="1">
                                <a href="" class="vm-puls jiahao" role="button">+</a>
                            </div>
                        </div>
                    </div>
                    <div class="property-buy-2">
                        <a href="" class="btn mr20 btn-primary btn-lg ">立即购买</a>
                        <a href="" class="btn btn-empty btn-lg hide">加入购物车</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部背景图片 -->
        <div class="simple">
            <div class="simple-1 container">
                商品详情
            </div>
            <div class="container">
                <div class="lazy">
                    <img src="../../images/shangping/bg-1.jpg" alt="">
                    <img src="../../images/shangping/bg-2.jpg" alt="">
                    <img src="../../images/shangping/bg-3.jpg" alt="">
                    <img src="../../images/shangping/bg-4.jpg" alt="">
                    <img src="../../images/shangping/bg-5.jpg" alt="">
                    <img src="../../images/shangping/bg-6.jpg" alt="">
                </div>
            </div>
        </div>
</body>

</html>